<script setup>
import { reactive, ref } from 'vue'
import { applicationAdd, applicationUpdate } from '@/assets/api/api'
import { showMsg } from '@/assets/js/utils'
const props = defineProps({
    visible: {
        type: Boolean,
        required: true,
    },
    title: {
        type: String,
        default: '',
    },
    newModalData: {
        type: Object,
        default() {
            return {}
        },
    },
    dataModel: {
        type: Object,
        default() {
            return {}
        },
    },
})

const emits = defineEmits(['update:visible', 'success'])
function closeAction() {
    emits('update:visible', false)
}
const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive({
    name: '',
    describe: '',
})
Object.assign(ruleForm, props.newModalData)
const rules = reactive({
    name: [
        {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
        },
        { min: 0, max: 10, message: '请输入0-10个字符', trigger: 'blur' },
    ],
    describe: [
        {
            required: true,
            message: '请输入描述内容',
            trigger: 'blur',
        },
    ],
})
const data_model = ref()
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            if (props.newModalData.id) {
                applicationUpdate(ruleForm)
                    .then(() => {
                        showMsg('编辑成功')
                        emits('update:visible', false)
                        emits('success')
                    })
                    .catch(() => {
                        showMsg('编辑失败', 'error')
                    })
                return
            }
            applicationAdd(ruleForm)
                .then(() => {
                    showMsg('新增成功')
                    emits('update:visible', false)
                    emits('success')
                })
                .catch(() => {
                    showMsg('新增失败', 'error')
                })
        } else {
            console.log('error submit!', fields)
        }
    })
}
defineExpose({
    data_model,
})
</script>

<template>
    <el-dialog
        :model-value="visible"
        :title="title"
        width="600px"
        :draggable="true"
        @close="closeAction"
    >
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
        >
            <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name" />
            </el-form-item>
            <el-form-item label="描述" prop="describe">
                <el-input v-model="ruleForm.describe" type="textarea" />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="closeAction">取消</el-button>
                <el-button type="primary" @click="submitForm(ruleFormRef)">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style lang="scss" scoped></style>
